<template>
  <div class="rscc-table-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>银行财产</span>
      </div>
      <div class="filter-bar">
        <el-input v-model="filters.bank" placeholder="银行名称" style="width: 120px; margin-right: 10px;" clearable />
        <el-select v-model="filters.type" placeholder="账户类型" style="width: 120px; margin-right: 10px;" clearable>
          <el-option label="储蓄" value="储蓄" />
          <el-option label="信用卡" value="信用卡" />
        </el-select>
        <el-select v-model="filters.status" placeholder="状态" style="width: 100px; margin-right: 10px;" clearable>
          <el-option label="正常" value="正常" />
          <el-option label="冻结" value="冻结" />
        </el-select>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </div>
      <el-table :data="pagedData" border stripe style="width: 100%; margin-top: 15px;">
        <el-table-column prop="bank" label="银行名称" width="120" />
        <el-table-column prop="type" label="账户类型" width="100" />
        <el-table-column prop="openDate" label="开户日期" width="120" />
        <el-table-column prop="balance" label="余额" width="100" />
        <el-table-column prop="currency" label="币种" width="80" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'RsccYhccView',
  data() {
    return {
      filters: { bank: '', type: '', status: '' },
      currentPage: 1,
      pageSize: 2,
      tableData: [
        { bank: '中国银行', type: '储蓄', openDate: '2012-06-01', balance: 50000, currency: 'CNY', status: '正常', remark: '工资卡' },
        { bank: '工商银行', type: '信用卡', openDate: '2015-09-10', balance: 20000, currency: 'CNY', status: '正常', remark: '备用金' },
        { bank: '招商银行', type: '储蓄', openDate: '2018-01-20', balance: 8000, currency: 'CNY', status: '冻结', remark: '理财账户' },
        { bank: '建设银行', type: '信用卡', openDate: '2020-11-05', balance: 10000, currency: 'CNY', status: '正常', remark: '日常消费' },
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(row => {
        const bankMatch = !this.filters.bank || row.bank.includes(this.filters.bank);
        const typeMatch = !this.filters.type || row.type === this.filters.type;
        const statusMatch = !this.filters.status || row.status === this.filters.status;
        return bankMatch && typeMatch && statusMatch;
      });
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    resetFilter() {
      this.filters = { bank: '', type: '', status: '' };
      this.currentPage = 1;
    }
  }
}
</script>
<style scoped>
.filter-bar { margin-bottom: 10px; }
.el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
.el-table { box-shadow: none !important; }
</style> 